<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 双向绑定原理</title>
</head>

<body>
    <div id="app">
      <div id='show'></div>
      <input type="text" id="input" >
    </div>
    <script>
       const show = document.getElementById('show');
       const input = document.getElementById('input');

       // 需要代理的数据对象
       const data = {
         text: 'hello lynn'
       };

       const handler = {
         set: function(target, prop, value) {
           if (prop === 'text') {
             // 更新值
             target[prop] = value;
             // 更新试图
             show.innerHTML = value;
             input.value = value;
             return true;
           } else {
             return false;
           }
         }
       }

       // 构造 proxy 对象
       const myText = new Proxy(data, handler);
       // 添加input监听事件
       input.addEventListener('input', function(e) {
         myText.text = e.target.value; // 更新 myText的值
       }, false);

       // 初始化值
       myText.text = data.text;
    </script>
</body>

</html>